/*提醒属性
动画属性
@keyframes myname{
	0%{}
	100%{}
}
动画简写 - animation: name 持续时间 延迟时间 播放次数(infinite无限循环) 过渡方式;包含全部属性
调用动画 - animation-name: myname;
持续时间 - animation-duration: 1s;
播放方式 - animation-timing-function; linear;
播放次数 - animation-iteration-count: infinite;无限循环可以写次数
延迟时间 - animation-delay: 2s;
自定义过渡效果 - transition-timing-function: cubic-bezier(1, 0, .5, 1);
过渡属性 - transition: background-color .3s linear;ease快到慢、linear恒速、ease-in越来越快、ease-out越来越慢、ease-in-out先快后慢
2D旋转属性 -  transform: rotate(180deg);//需在操作的样式加：transition:all 3s;
3D旋转属性 - transform: rotateY(180deg);//需在操作的样式加：transition:all 3s;
偏移属性 - transform: translate(-3px, -3px);包含下面两个值
水平偏移属性 - transform: translateX(-3px);
垂直偏移属性 - transform: translateY(-3px);
缩放属性 - transform: scale(1.1);
背景颜色渐变属性 - background: linear-gradient(to right, #000, #fff);

表格属性
取消表格外边框 - border-collapse: collapse;

文本属性
字体缩进属性 - text-indent: 2em;
设置字体间距 - letter-spacing: -10px;
阻止复制属性 - user-select: none;
溢出隐藏属性 - overflow:hidden;
强制文本在一行显示属性 - white-space:nowrap;
文本溢出显示省略号属性 - text-overflow:ellipsis;

css属性
元素的垂直对齐方式 - vertical-align: middle;
轮廓样式 - outline: none;

兼容属性
css3 4个内核 -moz- -ms- -o- -webkit-;
IE opacity写法 - filter:alpha(opacity = 100);
  
Flex
父元素设置 - display: flex;

水平设置 - justify-content: ;
子元素水平居中 - justify-content: center;
子元素水平左右距离一致 - justify-content: space-around;
子元素水平左中右布局 - justify-content: space-between;

垂直设置 - align-items: ;
子元素垂直居中 - align-items: center;                                                                                                            
*/

/* 通用设置 */
* {margin: 0;padding: 0;font-family: "微软雅黑", tahoma, arial, simsun, sans-serif;font-size: 13px;}
html, body {/*height: 100%;*/}
body {color: #222;background-color: #eee;}
a {-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
a, a:hover, a:active, a:visited, a:link, a:focus {-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline:none;background: none;text-decoration: none;}
a, u {color: inherit;font-size: inherit;text-decoration: none;}
a:link {color: inherit;text-decoration: none;}
a:visited {color: inherit;text-decoration: none;}
a:hover {color: inherit;text-decoration: none;}
a:active {color:  inherit;text-decoration: none;}
ul {font-size: 0;}
li {list-style: none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal;}
table {border-collapse:collapse;}
th, td {padding: 5px;}
input{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
input[type="text"]:focus, input[type="password"]:focus, select:focus {box-shadow: none;}
iframe {border: none;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.clearfix::after {clear: both;content: "";height: 0;display: block;visibility: hidden;}
.body-color {background-color: #fff;}


/* 页头 */
#header {width: 100%;background-color: #fff;}
#header .title {width: 100%;padding: 10px 0;display: flex;justify-content: space-between;align-items: center;}
#header .title h1 {font-size: 20px;font-weight: bold;margin-right: -10px;}
#header .title h1 span {font-size: 12px;font-weight: normal;}
#header .title i {font-size: 20px;margin-right: 10px;}


/* 主题 */
#main {width: 100%;}
/* 设置目标 */
#main .set-target {width: 100%;background-color: #14762d;padding: 25px 0 10px;}
#main .set-target .set-target-icon {width: 100%;display: flex;justify-content: center;}
#main .set-target .set-target-icon i {color: #fff;margin: 0 10px;}
#main .set-target .set-target-text {width: 100%;display: flex;justify-content: center;color: #fff;margin-top: 15px;}
#main .set-target .set-target-text p {font-size: 17px;text-align: center;}
#main .set-target .set-target-btn {width: 100%;display: flex;justify-content: center;margin-top: 20PX;}
#main .set-target .set-target-btn .btn {padding: 2px 30px;border: 1px solid #fff;color: #fff;background-color: transparent;}
/* 跑步步数视图 */
#main #running-view {height: 170px;width: 100%;background-color: #fff;}
/* 功能列表 */
#main .functions-list {width: 100%;}
#main .functions-list .f-list-tr {display: flex;justify-content: space-between;}
#main .functions-list .f-list-tr .f-list-td {width: 33.3%;margin: 3px;background-color: #fff;text-align: center;padding: 15px 0;}
#main .functions-list .f-list-tr .f-list-td i {font-size: 25px;}
#main .functions-list .f-list-tr .f-list-td p {font-size: 12px;margin-top: 15px;}
#main .functions-list .f-list-tr .f-list-td .f-list-btn {padding: 2px 35px;margin-top: 18px;display: inline-block;}
#main .functions-list .f-list-tr .f-list-td:first-child {color: #658f21;}
#main .functions-list .f-list-tr .f-list-td:nth-child(2) {color: #4d6f65;}
#main .functions-list .f-list-tr .f-list-td:last-child {color: #b2800c;}
#main .functions-list .f-list-tr .f-list-td:first-child .f-list-btn {border: 1px solid #658f21;}
#main .functions-list .f-list-tr .f-list-td:nth-child(2) .f-list-btn {border: 1px solid #4d6f65;}
#main .functions-list .f-list-tr .f-list-td:last-child .f-list-btn {border: 1px solid #b2800c;}
#main .functions-list .f-list-tr:nth-child(2) .f-list-td:nth-child(2) , #main .functions-list .f-list-tr:nth-child(2) .f-list-td:nth-child(3){background-color: #eee;color: #666;padding: 30px 0;}



/* 页脚固定 */
.footer-fixed {height: 54px;}
/* 页脚 */
#footer {width: 100%;background-color: #eee;position: fixed;bottom: 0;z-index: 1;display: flex;justify-content: space-between;border-top: 1px solid #ccc;background-color: #fff;}
#footer div {width: 33.3%;padding: 10px 0;text-align: center;}
.footer-active {color: green;}



/* 食物页头、饮食页头、完成页头 */
#food-header {position: fixed;top: 0;background-color: #fff;}
#food-header, #diet-header {width: 100%;}
#food-header .f-header-title, #food-header .f-header-nav {display: flex;justify-content: space-between;padding: 10px;}
#diet-header .title {display: flex;justify-content: space-between;padding: 20px 10px;}
#food-header .f-header-title i, #food-header .f-header-title a, #diet-header a {color: #336963;}
#food-header .f-header-title h5 {margin-left: 30px;font-weight: bold;color: #000;}
#diet-header h5 {font-weight: bold;color: #000;}
#food-header .f-header-nav a {display: block;width: 33.3%;text-align: center;border: 1px solid #336963;color: #336963;background-color: #fff;}
#food-header .f-header-nav a:first-child {border-radius: 5px 0 0 5px;}
#food-header .f-header-nav a:last-child {border-radius: 0 5px 5px 0;}
.f-header-nav-active {background-color: #337863 !important;color: #fff !important;}
#diet-header .nav {display: flex;justify-content: space-between;}
#diet-header .nav a {display: inline-block;width: 50%;text-align: center;border: 1px solid #336963;color: #336963;}
#diet-header .nav a:first-child {margin-left: 15px;border-radius: 5px 0 0 5px;}
#diet-header .nav a:last-child {margin-right: 15px;border-radius: 0 5px 5px 0;}
.diet-header-nav-active {background-color: #336963 !important;color: #fff !important;}


/* 食物主题 */
#food-main {width: 100%;margin-top: 76px;}
#food-main .search {padding: 0 10px;display: flex;justify-content: space-between;align-items: center;margin-bottom: 5px;background-color: #fff;}
#food-main .search div {width: 100%;}
#food-main .search input {border: none;outline: none;background-color: #fff;padding: 3px;margin-left: 3px;}
#food-main .search input[type="text"] {width: 91%;}
#food-main .food-list {background-color: #fff;}
#food-main .food-list ul li {display: flex;justify-content: space-between;border-bottom: 1px solid #ccc;padding: 10px 20px;align-items: center;}
#food-main .food-list ul li .text p {margin-top: 7px;color: #777;}
#food-main .food-list ul li .icon {border-left: 1px solid #ccc;padding-left: 20px;transition: all .3s;}
#food-main .food-list ul li .icon i {border: 1px solid #000;border-radius: 100%;padding: 3px;}
.food-list-icon-active {color: green !important;border-color: green !important;}



/* 饮食主题 */
#diet-main .date {padding: 0 80px;display: flex;justify-content: space-between;margin: 30px 0;align-items: center;}
#diet-main .calories, #diet-main .mealorder {padding: 0 15px;}
#diet-main .calories h3 {font-size: 20px;font-weight: bold;color: #000;}
#diet-main .calories h3 span {color: #222;font-weight: normal;}
#diet-main .calories>div {width: 18.8%;height: 15px;background-color: #336963;position: relative;}
#diet-main .calories>div::after {content: "";border-style: solid;border-width: 0 5px 5px 5px;border-color: transparent transparent #000 transparent;position: absolute;bottom: -5px;left: 100%;margin-left: -4px;}
#diet-main .calories>div div {background-color: #222;color: #fff;position: absolute;top: 20px;width: 35px;border-radius: 2px;text-align: center;left: 100%;margin-left: -17.5px;}
#diet-main .calories p {margin-top: 20px;text-align: right;color: #e1e2e3;}
#diet-main .mealorder {margin-top: 50px;}
#diet-main .title p {text-align: center;margin-bottom: 30px;}
#diet-main .title p b {font-size: 14px;}
#diet-main .tr {display: flex;justify-content: space-between;align-items: center;}
#diet-main .tr+.tr {margin-top: 30px;}
#diet-main .tr .td {width: 33.3%;margin: 0 5px;text-align: center;}
#diet-main .tr .td a {display: block;}
#diet-main .tr .td i {padding: 20px;font-size: 30px;color: #777;border-radius: 100%;}




/* 完成主题 */
#complete-main {margin-top: 37px;}
#complete-main .img {display: flex;justify-content: center;padding: 20px 10px;}
#complete-main .img a {display: block;}
#complete-main .img a i {font-size: 30px;}
#complete-main .num {padding: 0 10px;margin-top: 20px;}
#complete-main .num h2 {font-size: 15px;font-weight: bold;}
#complete-main .num p {margin-top: 10px;}
#complete-main .num a {display: block;text-align: right;margin-top: 30px;color: #336963;font-size: 15px;}
#complete-main .time {display: flex;justify-content: space-between;padding: 20px 10px;}
#complete-main .time p, #complete-main .time a {display: inline-block;width: 40%;}
#complete-main .time a {text-align: center;border: 1px solid #336963;border-radius: 3px;color: #336963;}
#complete-main .food {display: flex;padding: 20px 10px;justify-content: space-between;align-items: center;}
#complete-main .food .title span {color: #999;margin-top: 5px;display: block;}
#complete-main .food .btn input {text-align: center;width: 40px;height: 15px;line-height: 15px;border: none;outline: none;}
#complete-main .add-food {display: flex;justify-content: center;align-items: center;padding: 0 10px;}
#complete-main .add-food a {color: #666;border: 1px solid #999;padding: 2px 50px;}
